<html lang="en" class="" style="--value: 6; --progress: 0;"><head>

    <meta charset="UTF-8">
    <title>CodePen Demo</title>

    <meta name="robots" content="noindex">

    <link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
    <link rel="mask-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg" color="#111">
    <link rel="canonical" href="https://codepen.io/davidkpiano/pen/vxZEoO">

    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

    <style id="INLINE_PEN_STYLESHEET_ID">
        @charset "UTF-8";
        @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,700");
        :root {
            --value-progress: calc(var(--value, 6) / 12);
            font-family: Open Sans, sans-serif;
            font-weight: 300;
            font-size: 2.5vh;
        }

        #app {
            height: 96vh;
            width: 54vh;
            background: linear-gradient(to top right, #f76464, #ff8605, #EC4E91, #9535D3, #4DACFF);
            background-size: 400% 400%;
            background-position: calc(var(--value-progress) * 100%) 0;
            color: white;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            overflow: hidden;
            box-shadow: 0 0 4vh rgba(0, 0, 0, 0.1);
        }
        @media (max-width: 740px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
            #app {
                width: 100%;
                height: 100%;
            }
        }

        .ui-header {
            height: 8vh;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding: 2vh;
            background: white;
            color: #B5B5B5;
        }
        .ui-header > * {
            width: 25%;
            flex: 0 0 25%;
        }
        .ui-header > .ui-text.-app-title {
            text-align: center;
            flex: 1 0 auto;
            white-space: nowrap;
        }
        .ui-header > .ui-text:last-child {
            text-align: right;
        }

        .ui-content {
            flex: 1 0 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding-top: 8vh;
        }

        .ui-discounts {
            padding: 2vh 0;
            text-align: center;
            width: calc(100% - 6vh);
            margin: 0 2vh;
            border-bottom: 1px solid rgba(255, 255, 255, 0.25);
        }
        .ui-discounts > .ui-text {
            margin: 1vh 0;
            line-height: 1;
            letter-spacing: 0.5px;
        }

        .ui-value {
            height: 24vh;
            width: 28.8vh;
            line-height: 24vh;
            margin: 2vh 0;
            font-weight: 700;
        }
        .ui-value:before, .ui-value:after {
            display: block;
            position: absolute;
            height: 4vh;
            line-height: 4vh;
            top: calc(50% - 2vh);
            font-weight: 300;
            font-size: 2.5vh;
            letter-spacing: 0.5px;
            transition: transform 0.6s ease;
        }
        .ui-value:before {
            content: "Every";
            right: 100%;
            transform: translateX(calc(var(--changing) * -50%));
        }
        .ui-value:after {
            content: "hours";
            left: 100%;
            transform: translateX(calc(var(--changing) * 50%));
        }

        .ui-digit {
            position: absolute;
            font-size: 24vh;
            width: 100%;
            text-align: center;
            height: 100%;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        #num1 {
            transform: translateX(calc(var(--progress, 0) * -10vh)) scale(calc(1 + var(--progress, 0)));
            opacity: calc(1 - var(--progress, 0));
            filter: blur(calc(var(--progress) * 2px));
        }

        #num2 {
            transform: translateX(calc(var(--progress, 0) * -10vh + 10vh)) scale(calc(var(--progress, 0)));
            opacity: var(--progress, 0);
        }

        .ui-panel {
            width: 100%;
        }

        .ui-controls {
            background: white;
            padding: 6vh 4vh;
        }

        .ui-switch {
            margin: 0 auto;
            top: 2vh;
            width: 8vh;
            height: 4vh;
            border-radius: 4vh;
            background-image: linear-gradient(to right, #FF6850, #FF8A2B);
        }
        .ui-switch:before, .ui-switch:after {
            position: absolute;
            color: #656565;
            margin: 0 2vh;
            height: 2vh;
            top: calc(50% - 1vh);
            display: block;
            font-size: 2vh;
            line-height: 2vh;
            letter-spacing: 0.5px;
        }
        .ui-switch:before {
            content: "Off";
            right: 100%;
        }
        .ui-switch:after {
            content: "On";
            left: 100%;
        }

        input#switch {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }
        input#switch:checked + #app * .ui-switch-track {
            transform: translateX(-2vh) scale(0.8);
        }
        input#switch:checked + #app * .ui-range-track {
            display: none;
        }
        input#switch:not(:checked) + #app {
            --thumb-opacity: 0;
        }

        .ui-switch-track {
            position: absolute;
            top: 0;
            left: calc(50% - 2vh);
            width: 4vh;
            height: 4vh;
            border-radius: 50%;
            border: 0.5vh solid rgba(255, 255, 255, 0.1);
            background: white;
            display: block;
            transform: translateX(2vh) scale(0.8);
            transition: transform 0.3s ease;
            box-shadow: 0 0 1vh rgba(0, 0, 0, 0.1);
        }

        .ui-range {
            width: 100%;
            background: white;
            z-index: 1;
        }
        .ui-range > input {
            position: absolute;
            z-index: 1;
            top: -3vh;
        }

        .ui-range-track {
            position: absolute;
            top: 1vh;
            width: calc(100% - 8vh);
            transform: translateX(calc(var(--value, 6) / 12 * 100% - 50%));
            left: 4vh;
            z-index: 1;
            pointer-events: none;
        }
        .ui-range-track:before, .ui-range-track:after {
            content: "";
            position: absolute;
            width: 8vh;
            height: 8vh;
            border-radius: 50%;
            top: -4vh;
            left: calc(50% - 4vh);
            background: white;
        }
        .ui-range-track:before {
            transform: scale(1.2);
        }
        .ui-range-track:after {
            content: "";
            font-family: FontAwesome;
            font-size: 4vh;
            line-height: 8vh;
            color: #FF6850;
            text-align: center;
            top: -4vh;
            box-shadow: 0 0.5vh 2vh 0.5vh rgba(0, 0, 0, 0.1);
        }

        .ui-range-ticks {
            width: 100%;
            height: 3vh;
            margin-bottom: 6vh;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding: 0 2vh;
        }

        .ui-range-tick {
            width: 4vh;
            transform: translateY(calc(var(--proximity) * 1vh - 1vh));
        }
        .ui-range-tick:before {
            content: attr(data-value);
            display: block;
            width: 100%;
            text-align: center;
            transform: scale(calc((2 - var(--proximity)) / 3 + 1));
            transform-origin: bottom center;
        }
        .ui-range-tick:after {
            content: "";
            position: absolute;
            display: block;
            width: 1px;
            height: 1vh;
            background: white;
            left: calc(50% - 0.5px);
            top: calc(100% + 1vh);
            transform: translateY(calc(var(--proximity) * 0.5vh - 0.5vh));
        }

        .ui-footer {
            color: #B5B5B5;
            background: white;
            padding: 1rem 0;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            box-shadow: 0 -0.5rem 1rem rgba(128, 128, 128, 0.1);
            z-index: 1;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: linear-gradient(to bottom right, white, #E7E7EF);
        }

        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        svg {
            display: none;
        }

        *, *:before, *:after {
            box-sizing: border-box;
            position: relative;
        }

        [type=range] {
            -webkit-appearance: none;
            margin: 4vh 0;
            width: 100%;
        }
        [type=range]:focus {
            outline: 0;
        }
        [type=range]:focus::-webkit-slider-runnable-track {
            background: #fcfcfc;
        }
        [type=range]:focus::-ms-fill-lower {
            background: #EFEFEF;
        }
        [type=range]:focus::-ms-fill-upper {
            background: #fcfcfc;
        }
        [type=range]::-webkit-slider-runnable-track {
            cursor: pointer;
            height: 1px;
            -webkit-transition: all 0.2s ease;
            transition: all 0.2s ease;
            width: 100%;
            opacity: --thumb-opacity;
            box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(13, 13, 13, 0.2);
            background: #EFEFEF;
        }
        [type=range]::-webkit-slider-thumb {
            box-shadow: 0 0.5vh 2vh 0.5vh rgba(0, 0, 0, 0.1);
            background: white;
            border: 0 solid #eceff1;
            border-radius: 8vh;
            cursor: pointer;
            height: 8vh;
            width: 8vh;
            opacity: var(--thumb-opacity, 1);
            -webkit-appearance: none;
            margin-top: calc(0.5px - 4vh);
        }
        [type=range]::-moz-range-track {
            cursor: pointer;
            height: 1px;
            -moz-transition: all 0.2s ease;
            transition: all 0.2s ease;
            width: 100%;
            opacity: --thumb-opacity;
            box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(13, 13, 13, 0.2);
            background: #EFEFEF;
        }
        [type=range]::-moz-range-thumb {
            box-shadow: 0 0.5vh 2vh 0.5vh rgba(0, 0, 0, 0.1);
            background: white;
            border: 0 solid #eceff1;
            border-radius: 8vh;
            cursor: pointer;
            height: 8vh;
            width: 8vh;
            opacity: var(--thumb-opacity, 1);
        }
        [type=range]::-ms-track {
            cursor: pointer;
            height: 1px;
            -ms-transition: all 0.2s ease;
            transition: all 0.2s ease;
            width: 100%;
            opacity: --thumb-opacity;
            background: transparent;
            border-color: transparent;
            border-width: 4vh 0;
            color: transparent;
        }
        [type=range]::-ms-fill-lower {
            box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(13, 13, 13, 0.2);
            background: #e2e2e2;
        }
        [type=range]::-ms-fill-upper {
            box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(13, 13, 13, 0.2);
            background: #EFEFEF;
        }
        [type=range]::-ms-thumb {
            box-shadow: 0 0.5vh 2vh 0.5vh rgba(0, 0, 0, 0.1);
            background: white;
            border: 0 solid #eceff1;
            border-radius: 8vh;
            cursor: pointer;
            height: 8vh;
            width: 8vh;
            opacity: var(--thumb-opacity, 1);
            margin-top: 0;
        }
    </style>


    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>
    <script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js"></script>
    <script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js"></script>
    <script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js"></script>
</head>

<body>
<input type="checkbox" id="switch">
<div id="app">
    <header class="ui-header">
        <i class="fa fa-chevron-left"></i>
        <div class="ui-text -app-title">App Settings</div>
        <div class="ui-text">Apply</div>
    </header>
    <main class="ui-content">
        <div class="ui-discounts">
            <i class="fa fa-codepen"></i>
            <div class="ui-text">Get hottest discounts</div>
        </div>
        <div class="ui-value">
            <div class="ui-digit" id="num1">6</div>
            <div class="ui-digit" id="num2">6</div>
        </div>
        <div class="ui-panel">
            <div class="ui-range-ticks">
                <div class="ui-range-tick" data-value="0" style="--proximity: 2;"></div>
                <div class="ui-range-tick" data-value="3" style="--proximity: 2;"></div>
                <div class="ui-range-tick" data-value="6" style="--proximity: 0;"></div>
                <div class="ui-range-tick" data-value="9" style="--proximity: 2;"></div>
                <div class="ui-range-tick" data-value="12" style="--proximity: 2;"></div>
            </div>
            <div class="ui-range" id="rangeTrack">
                <input type="range" id="range" class="ui-range-input" min="0" max="12" step="1" value="6">
                <div class="ui-range-track">
                    <div class="ui-range-thumb"></div>
                </div>
            </div>

            <div class="ui-controls">
                <div class="ui-switch">
                    <label class="ui-switch-track" for="switch" title="Turn smooth range thumb on/off">
                    </label>
                </div>
            </div>

            <div class="ui-footer">
                <i class="fa fa-shopping-bag"></i>
                <i class="fa fa-cart-arrow-down"></i>
                <i class="fa fa-filter"></i>
                <i class="fa fa-gear"></i>
            </div>
        </div>
    </main>
</div>

<script src="https://unpkg.com/@reactivex/rxjs@5.1.1/dist/global/Rx.min.js"></script>
<script src="./script.js" crossorigin=""></script>


</body></html>